<template>
        <ul class="switches-list">
            <li class="item" :class="{active: currentIndex === index}" v-for="(item, index) in switches" @click="changeSwitch(index)">
                {{item.label}}
            </li>
        </ul>
</template>
<script>
    export default {
        name: 'switches',
        props: {
            switches: {
                type: Array,
                default: [],
            },
            currentIndex: {
                type: Number,
                default: 0,
            },
        },
        methods: {
            changeSwitch(index) {
                this.$emit('changeSwitch', index);
            },
        },
    };
</script>
<style lang="stylus" scoped>
@import '~styl/var'
    .switches-list
        display flex
        justify-content center
        align-items: center
        border-radius 5px
        border 1px solid #333
        .item
            flex 1
            padding 8px
            text-align center
            font-size 14px
            color rgba(255, 255, 255, 0.3)
            &.active
                background #333
                color #fff
</style>
